<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>HTML/CSS/JS 在线工具 | 菜鸟工具</title>
    <link rel='dns-prefetch' href='//s.w.org' />
    <link rel='stylesheet' id='wpProQuiz_front_style-css' href='https://c.runoob.com/wp-content/plugins/Wp-Pro-Quiz/css/wpProQuiz_front.min.css?ver=0.37' type='text/css' media='all' />
    <link rel="canonical" href="https://c.runoob.com/front-end/61" />
    <meta name="keywords" content="HTML/CSS/JS 在线工具">
    <meta name="description" content="通过 HTML/CSS/JS 在线工具，你可以在线输入 HTML 、CSS、JS 代码，该工具能实时显示运行效果。..">

    <script src="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.48.2/addon/mode/simple.min.js"></script>
    <link rel="stylesheet" href="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.css">

    <script src="//cdn.staticfile.org/codemirror/5.48.2/mode/htmlmixed/htmlmixed.js"></script>

    <script src="//cdn.staticfile.org/codemirror/5.48.2/mode/css/css.js"></script>

    <script src="//cdn.staticfile.org/codemirror/5.48.2/mode/javascript/javascript.js"></script>

    <script src="//cdn.staticfile.org/codemirror/5.48.2/mode/xml/xml.js"></script>

    <script src="static/js/format.js"></script>
    <link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet">

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="static/css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="static/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- PHP 代码 -->
    <link rel="stylesheet" href="static/css/style.css?version=1.03">




    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

</head>

<body>


    <nav class="navbar navbar-inverse navbar-fixed-top runoob-header" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">菜单切换</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand runoob-title" href="//chuhongbo.com">波哥编程</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a target="_blank" href="/front-end/61">WEB 在线编辑器</a></li>
                    <li><a target="_blank" href="/more/svgeditor">SVG 在线编辑器</a></li>
                    <li><a target="_blank" href="/examples">跟波哥学HTML和CSS</a></li>
                    <li><a href="http://www.chuhongbo.com" target="_blank">视频教程</a></li>

                </ul>


            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <div class="container">
        <link rel="stylesheet" href="//static.runoob.com/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="//static.runoob.com/assets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/jqwidgets/jqxsplitter.js"></script>
        <script src="//cdn.staticfile.org/codemirror/5.25.0/addon/edit/closetag.min.js"></script>
        <script src="//cdn.staticfile.org/codemirror/5.25.0/addon/edit/closebrackets.js"></script>
        <script src="//cdn.staticfile.org/codemirror/5.25.0/addon/display/placeholder.js"></script>
        <style type="text/css">
            .container {
                width: 100%;
            }
            
            .CodeMirror {
                border: 0px solid #fff;
                height: auto;
                font-size: 14px;
                line-height: 18px;
            }
            /*
.CodeMirror pre {
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: keep-all;
}*/
            
            table td {
                word-wrap: break-word;
                word-break: break-all;
            }
            
            .modal-dialog {
                width: 800px;
            }
            
            #output {
                width: 100%;
                height: 100%;
            }
            
            #iframeResult {
                display: block;
                overflow: hidden;
                border: 0 !important;
                min-width: 100px;
                width: 100%;
                height: 100%;
                background-color: #fff
            }
        </style>


        <div class="row" style="padding-top:12px;" id="runoob-content">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <form class="form-inline" role="form">
                            <label style="margin-right:12px;"><strong style="font-size: 16px"><i class="fa fa-cogs"></i>
                                    HTML/CSS/JS 在线工具</strong></label>

                            <!-- <button type="button" class="btn btn-warning" id="librep">选择库</button>-->
                            <button type="button" class="btn btn-warning" id="basehtml">HTML 模板</button>
                            <div class="form-group">
                                <select class="form-control" id="sel1">
                                    <option value="nourl" selected="selected">选择库...</option>
                                    <option value="jq">使用 jQuery 2.2.4</option>
                                    <option value="bs">使用 Bootstrap 3.3.7</option>
                                    <option value="ag">使用 Angular 1.6.6</option>
                                    <option value="vue">使用 Vue 2.2.2</option>
                                    <option value="fa">使用 Font Awesome 4.7.0</option>
                                    <option value="more">更多……</option>
                                </select>
                                <button type="button" class="btn btn-success" id="runcode">运行</button>
                                <label>
                                    <input type="checkbox" id="isautorun">自动执行
                                </label>
                            </div>

                            <label style="float: right;color: red;">外部资源请使用 https 协议</label>
                            <div class="form-group alert alert-danger" style="display:none;padding: 6px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <span> 错误！请进行一些更改。</span>
                            </div>

                        </form>

                    </div>
                    <div class="panel-body" style="padding:0;">
                        <form role="form" id="compiler-form">
                            <div id="splitContainer">
                                <div>
                                    <div id="leftSplitter">
                                        <div>
                                            <textarea placeholder="输入 HTML 代码……" id="code-html" class="form-control" name="code" rows="11"></textarea>
                                            <a href="javascript:void(0);" class="windowLabel" data-panel="js">
                                                <span class="label">
                                                    HTML
                                                </span>
                                                <i class="fa fa-cog">
                                                </i>
                                            </a>
                                        </div>
                                        <div>
                                            <textarea placeholder="输入 JavaScript 代码……" id="code-js" class="form-control" name="code" rows="10"></textarea>
                                            <a href="javascript:void(0);" class="windowLabel" data-panel="js">
                                                <span class="label">
                                                    JavaScript
                                                </span>
                                                <i class="fa fa-cog">
                                                </i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div id="rightSplitter">
                                        <div>
                                            <textarea placeholder="输入 CSS 代码……" id="code-css" class="form-control" rows="11"></textarea>
                                            <a href="javascript:void(0);" class="windowLabel" data-panel="js">
                                                <span class="label">
                                                    CSS
                                                </span>
                                                <i class="fa fa-cog">
                                                </i>
                                            </a>
                                        </div>
                                        <div id="output">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            生成链接
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">标题</span>
                            <input type="text" id="post_title" class="form-control" placeholder="请输入标题……">
                        </div><br>
                        <div class="alert alert-warning">提示！对于发布的内容我们会定期审核，对于违规或错误代码会进行删除处理。</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-success" id="save">
                            保存代码
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>


        <!-- 模态框（Modal）扩展库 -->
        <div class="modal fade" id="libs" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            扩展库
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="input-group">
                                <span class="input-group-addon">输入库名：</span>
                                <input type="text" class="form-control" id="filter" placeholder="搜索扩展库……">
                            </div>
                            <i id="fa-spinner" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="display: none;padding: 10px;"></i>
                            <table id="libs-table" class="table table-striped"></table>

                        </form>
                    </div>

                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                var winHeight = 0;
                if (window.innerHeight) {
                    winHeight = window.innerHeight;
                } else if ((document.body) && (document.body.clientHeight)) {
                    winHeight = document.body.clientHeight;
                }
                //通过深入Document内部对body进行检测，获取浏览器窗口高度
                if (document.documentElement && document.documentElement.clientHeight) {
                    winHeight = document.documentElement.clientHeight;
                }
                $("#runcode").click(function() {
                    submitTryit();
                });
                $("#isautorun").prop("checked", true);
                height = (winHeight - 60) * 0.86;
                $('#splitContainer').jqxSplitter({
                    height: height,
                    width: '100%',
                    orientation: 'vertical',
                    panels: [{
                        size: '50%'
                    }, {
                        size: '50%'
                    }]
                });
                $('#leftSplitter').jqxSplitter({
                    height: '100%',
                    width: '100%',
                    orientation: 'horizontal',
                    panels: [{
                        size: '50%'
                    }, {
                        size: '50%'
                    }]
                });
                $('#rightSplitter').jqxSplitter({
                    height: '100%',
                    width: '100%',
                    orientation: 'horizontal',
                    panels: [{
                        size: '50%'
                    }, {
                        size: '50%'
                    }]
                });
            });
            // CM OPTIONS
            var cm_opt = {
                mode: 'text/html',
                gutter: true,
                lineNumbers: true,
                autoCloseBrackets: true,
                lineWrapping: true,
                matchBrackets: true,
                autoCloseTags: true
            };
            // HTML EDITOR
            var html_box = document.querySelector('#code-html');
            var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
            //var isautorun = $('#isautorun').prop('checked');
            html_editor.on('change', function(inst, changes) {
                if ($('#isautorun').prop('checked')) {
                    submitTryit();
                }

            });
            // CSS EDITOR
            cm_opt.mode = 'css';
            var css_box = document.querySelector('#code-css');
            var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);


            css_editor.on('change', function(inst, changes) {
                if ($('#isautorun').prop('checked')) {
                    submitTryit();
                }
            });

            // JAVASCRIPT EDITOR
            cm_opt.mode = 'javascript';
            var js_box = document.querySelector('#code-js');
            var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);


            js_editor.on('change', function(inst, changes) {
                if ($('#isautorun').prop('checked')) {
                    submitTryit();
                }
            });

            $("#basehtml").click(function() {
                _html_code =
                    "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>文档标题</title>\n</head>\n<body>\n\t<h1>我的第一个HTML页面</h1>\n\t<p>我的第一个段落。</p>\n</body>\n</html>\n";
                html_editor.getDoc().setValue(_html_code);
            });


            $("#librep").click(function() {
                $("#libs").modal("show");
            });
            $("select").change(function() {
                $("select option:selected").each(function() {
                    _thisvar = $(this).val();
                    _inithtmlcode = html_editor.getValue();
                    if (_thisvar == 'more') {
                        $("#libs").modal("show");
                    } else if (_thisvar == 'jq') {
                        _html_script_code =
                            "<script src=\"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"><\/script>\n";
                        html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
                    } else if (_thisvar == 'bs') {
                        _html_script_code =
                            "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">\n<script src=\"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js\"><\/script>\n<script src=\"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js\"><\/script>\n";
                        html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
                    } else if (_thisvar == 'ag') {
                        _html_script_code =
                            "<script src=\"https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js\"><\/script>\n";
                        html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
                    } else if (_thisvar == 'vue') {
                        _html_script_code =
                            "<script src=\"https://cdn.staticfile.org/vue/2.2.2/vue.min.js\"><\/script>\n";
                        html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
                    } else if (_thisvar == 'fa') {
                        _html_script_code =
                            "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css\">\n";
                        html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
                    }
                });
            });

            $('#libs').on('hidden.bs.modal', function() {
                $("#sel1 option:first-child").attr('selected', true);
                $("#sel1 option:last-child").attr('selected', false);
                $("#libs-table tr").removeClass("success");
            })


            $("#filter").keyup(function() {
                _search_value = $(this).val();

                $.get('https://api.cdnjs.com/libraries', {
                    search: _search_value
                }, function(data) {
                    var _val_tr = '';
                    $("#fa-spinner").show();
                    $.each(data.results, function(i, item) {
                        if (i < 10) {
                            _val_tr += '<tr><td>' + item.name + ' </td><td>' + item.latest +
                                '</td><td>&nbsp;&nbsp;<i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;</td></tr>';
                        } else {
                            return false;
                        };
                    });
                    if (_val_tr) {
                        $("#libs-table").html('<tr><th>库名</th><th>地址</th><th>插入</th></tr>' + _val_tr);
                    }
                    $("#fa-spinner").hide();
                });
            });
            $(document).ajaxComplete(function() {
                $("tr").not(':first').hover(
                    function() {
                        if (!$(this).hasClass("success")) {
                            $(this).addClass("warning");
                        }
                    },
                    function() {
                        $(this).removeClass("warning");
                    }
                );
                $("tr").not(':first').click(function() {
                    if (!$(this).hasClass("success")) {
                        _editor_content = html_editor.getValue();
                        $(this).addClass("success")
                        $(this).removeClass("warning");
                        _libsrc = $(this).find("td").eq(1).text();
                        if (_editor_content.indexOf(_libsrc) !== -1) {
                            return;
                        }
                        if (_libsrc.indexOf('.js') !== -1) {
                            _libsrc = '<script src="' + _libsrc + '"><\/script>\n';
                        } else if (_libsrc.indexOf('.css') !== -1) {
                            _libsrc = '<link rel="stylesheet" href="' + _libsrc + '">\n';
                        }

                        patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
                        array_matches_body = patternBody.exec(_editor_content);
                        patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
                        array_matches_head = patternHead.exec(_editor_content);

                        if (array_matches_head) {
                            _editor_content = _editor_content.replace('</head>', _libsrc + '</head>');

                        } else if (array_matches_body) {
                            _editor_content = _editor_content.replace('</body>', _libsrc + '</body>');
                        } else {
                            _editor_content = _libsrc + _editor_content;
                        }
                        html_editor.getDoc().setValue(_editor_content);
                    }
                });
            });

            $("#save").click(function() {
                post_title = $("#post_title").val().trim();
                var isnum = /^\d+$/.test(post_title);
                var isletter = /^[a-zA-Z]+$/.test(post_title);
                if (isnum) {
                    alert("请认真填写标题！");
                } else if (isletter) {
                    alert("加点中文描述，大家更容易理解！");
                } else if (post_title == "" || post_title.length < 6) {
                    alert("标题不能为空且不能少于6个字符……");
                } else {
                    var htmlSource = html_editor.getValue(),
                        cssSource = css_editor.getValue(),
                        jsSource = js_editor.getValue(),
                        post_content = '';
                    if (htmlSource != '' || jsSource != '' || cssSource != '') {
                        $.post("/savecode.php", {
                            post_title: post_title,
                            html: htmlSource,
                            js: jsSource,
                            css: cssSource,
                            filename: ""
                        }, function(data) {

                            if (data.errno) {
                                alert(data.msg)
                            } else {
                                $("#save").prop('disabled', false);
                                alert(data.msg)
                                window.location.href = data.url
                            }

                        }, "json");
                    } else {
                        alert("请输入你要展示的代码……");
                    }
                }

            });
            html_editor.setSize('100%', '100%');
            js_editor.setSize('100%', '100%');
            css_editor.setSize('100%', '100%');




            function submitTryit() {
                // 基础模板

                var html = html_editor.getValue(),
                    css = css_editor.getValue(),
                    js = js_editor.getValue(),
                    src = html;
                if (html) {
                    var patternHtmlTag = /<html([^>]*)>/im;
                    var array_matches_html_tag = patternHtmlTag.exec(src);
                    if (array_matches_html_tag) {
                        src = src.replace('<html>', '<html ' + array_matches_html_tag[1] + '>');
                    }
                    var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
                    var array_matches_head = patternHead.exec(src);

                    var patternBodyTag = /<body([^>]*)>/im;
                    var array_matches_body_tag = patternBodyTag.exec(src);
                    if (array_matches_body_tag) {
                        src = src.replace('<body>', '<body ' + array_matches_body_tag[1] + '>');
                    }

                }
                //console.log(css);
                if (css.indexOf('<style>') !== -1) {
                    $(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
                    $(".alert-danger").show().delay(5000).fadeOut();
                    return;
                } else if (js.indexOf('<script>') !== -1) {
                    $(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
                    $(".alert-danger").show().delay(5000).fadeOut();
                    return;
                } else {
                    $(".alert-danger").hide();
                }

                // CSS
                if (css) {
                    css = '<style>' + css + '</style>';
                    if (array_matches_head) {
                        src = src.replace('</head>', css + '</head>');
                    } else if (array_matches_body_tag) {
                        src = src.replace('</body>', css + '</body>');
                    } else {
                        src += css;
                    }
                }

                // Javascript
                if (js) {
                    js = '<script>' + js + '<\/script>';
                    if (array_matches_body_tag) {
                        src = src.replace('</body>', js + '</body>');
                    } else {
                        src += js;
                    }
                }

                text = src;
                var ifr = document.createElement("iframe");
                ifr.setAttribute("frameborder", "0");
                ifr.setAttribute("id", "iframeResult");
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(ifr);

                var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr
                    .contentDocument.document : ifr.contentDocument;
                ifrw.document.open();
                ifrw.document.write(text);
                ifrw.document.close();
                autodivheight();
            }
            submitTryit();
            window.addEventListener("resize", autodivheight);

            function autodivheight() {
                var winHeight = 0;
                if (window.innerHeight) {
                    winHeight = window.innerHeight;
                } else if ((document.body) && (document.body.clientHeight)) {
                    winHeight = document.body.clientHeight;
                }
                //通过深入Document内部对body进行检测，获取浏览器窗口高度
                if (document.documentElement && document.documentElement.clientHeight) {
                    winHeight = document.documentElement.clientHeight;
                }
                height = height = (winHeight - 60) * 0.86;
                document.getElementById("splitContainer").style.height = height + "px";
            }
        </script>




    </div>



    <div style="display:none;">
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?68c6d4f0f6c20c5974b17198fa6fd40a";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
            (function() {
                var bp = document.createElement('script');
                var curProtocol = window.location.protocol.split(':')[0];
                if (curProtocol === 'https') {
                    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
                } else {
                    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
                }
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(bp, s);
            })();
        </script>

    </div>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>